<template>
  <div id="selectionlist" class="necessary">
    <el-dialog title="批示意见/办理提示" :visible.sync="noticeVisible" width="95%">
      <notice :noticePersonId="noticePersonId" :step="2"></notice>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="noticeVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="办理情况" :visible.sync="detailVisible" width="1100px" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <detail :substep="tabitem" :personid='editpersonid'></detail>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="detailVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection/necessarygbc' }">凡提四必</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px);">
          <div style="margin:15px;">
            <el-table :data="personlist3" highlight-current-row v-loading="listLoading" style="width: 100%; margin-bottom:15px" border @selection-change="handleSelectionChange">
              <el-table-column type="selection"  width="50">
              </el-table-column>
              <el-table-column type="index" label="序号" width="55">
              </el-table-column>
              <el-table-column prop="realName" label="姓名">
              </el-table-column>
              <el-table-column label="凡提四必">
                <el-table-column label="查核干部档案" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <i v-show="scope.row.stateCadreArchives===-1" class="icon_c_-1"></i>
                    <el-button v-show="scope.row.stateCadreArchives!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,1)" icon="el-icon-search" title="查看详情"></el-button>
                    {{scope.row.resultCadreArchives}}
                  </template>
                </el-table-column>
                <el-table-column prop="jobName" label="查核有关事项" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <i v-show="scope.row.statePersonalMatters===-1" class="icon_c_-1"></i>
                    <el-button v-show="scope.row.statePersonalMatters!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,2)" icon="el-icon-search" title="查看详情"></el-button>
                    {{scope.row.resultPersonalMatters}}
                  </template>
                </el-table-column>
                <el-table-column prop="jobLevel" label="征求纪检监察部门意见" width="250" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <i v-show="scope.row.stateSolicitingOpinions===-1" class="icon_c_-1"></i>
                    <el-button v-show="scope.row.stateSolicitingOpinions!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,3)" icon="el-icon-search" title="查看详情"></el-button>
                    {{scope.row.resultSolicitingOpinions}}
                  </template>
                </el-table-column>
                <el-table-column prop="jobLevel" label="线索举报调查" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <i v-show="scope.row.stateClueReporting===-1" class="icon_c_-1"></i>
                    <el-button v-show="scope.row.stateClueReporting!==-1" type="text" @click="showdetail(scope.row.busCandidatePersonId,4)" icon="el-icon-search" title="查看详情"></el-button>
                    {{scope.row.resultClueReporting}}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="是否进行后续工作" width="160">
                <template slot-scope="scope">
                  <span v-show="scope.row.isAffected">否</span>
                  <span v-show="!scope.row.isAffected">是</span>
                </template>
              </el-table-column>
              <el-table-column label="批示意见/办理提示" width="160">
                <template slot-scope="scope">
                  <el-popover placement="bottom" width="600" trigger="hover">
                    <notice :noticePersonId="scope.row.busCandidatePersonId" step="2"></notice>
                    <el-button size="small" slot="reference" type="primary" @click="showNotice(scope.row.busCandidatePersonId)">查看详情</el-button>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="success" :loading="finishloading" @click="saveComplete">完成凡提四必环节</el-button>
          </div>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import notice from '../common/Notice'
import SelectGroupNecessary from '../common/SelectGroupNecessary'
import detail from './common/detail'
export default {
  components: {
    notice,
    SelectGroupNecessary,
    detail
  },
  data () {
    return {
      finishloading: false,
      mangeDep: '',
      departmentCode: 0,
      tabitem: 1,
      editpersonid: '',
      result: '',
      noticeTit: '办理提示',
      noticeData: [],
      noticeTit2: '批示意见',
      noticeData2: [],
      resultTitle: '结论',
      resultVisible: false,
      noticeVisible: false,
      detailVisible: false,
      tabdept: '干部一处事项',
      dongyipersonlist: [],
      status: '待分配任务',
      personlist: [],
      personlist1: [],
      personlist2: [],
      personlist3: [],
      selectPerson: [],
      listLoading: false,
      tableHeight: 100,
      selectData: {
        hjData: [
        ],
        szData: [
        ],
        yyData: [],
        noticeVisible: false
      },
      noticePersonId: 0,
      resultpersonid: 0,
      resultstep: 0,
      resultList: 2,
      num1: 0,
      num2: 0,
      num3: 0
    }
  },
  methods: {
    saveComplete () {
      if (this.selectPerson.length === 0) {
        this.$message({
          message: '请至少选择一个人选',
          type: 'error'
        })
        return
      }
      let personIds = []
      for (let i = 0; i < this.selectPerson.length; i++) {
        personIds.push(this.selectPerson[i].personId)
      }
      let para = {personIds: personIds}
      this.finishloading = true
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/necessary/completeStep`, para) // 需要新增讨论决定环节完成接口
        .then(response => {
          this.finishloading = false
          if (response.data.success) {
            this.$message({
              message: '凡提四必完成',
              type: 'success'
            })
            this.getApproveList()
          }
        })
        .catch(error => {
          this.finishloading = false
          console.log(error)
        })
    },
    loadSelectData () {
      this.selectData.hjData = []
      this.selectData.szData = []
      this.selectData.yyData = []
      let departmentName = ''
      if (this.departmentCode === 1) {
        departmentName = '干部一处'
      } else if (this.departmentCode === 2) {
        departmentName = '干部二处'
      } else if (this.departmentCode === 3) {
        departmentName = '干部三处'
      }
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=1`)
        .then(response => {
          if (response.data.success) {
            console.log('departmentName' + departmentName)
            this.selectData.hjData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].unitName === '干部监督处' || response.data.result[i].unitName === departmentName) {
                this.selectData.hjData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=2`)
        .then(response => {
          if (response.data.success) {
            this.selectData.szData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].roleName === 'ROLE_sizhang' || response.data.result[i].manageDep.indexOf(departmentName) > -1 || response.data.result[i].manageDep.indexOf('干部监督处') > -1) {
                this.selectData.szData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getCommonlyOpinions?step=2`)
        .then(response => {
          if (response.data.success) {
            this.selectData.yyData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    changedept () {
      this.changetabs()
    },
    handleClick () {
      this.changetabs()
    },
    changetabs () {
      this.selectData.hjData = []
      this.selectData.szData = []
      this.selectData.yyData = []
      if (this.tabdept === '干部一处事项') {
        this.departmentCode = 1
      }
      if (this.tabdept === '干部二处事项') {
        this.departmentCode = 2
      }
      if (this.tabdept === '干部三处事项') {
        this.departmentCode = 3
      }
      this.getApproveList()
    },
    showdetail (id, itemid) {
      this.tabitem = itemid
      this.editpersonid = id
      this.detailVisible = true
      console.log('this.tabitem')
      console.log(this.tabitem)
    },
    showResult (id, step) {
      this.resultVisible = true
      this.resultpersonid = id
      this.resultstep = step
      this.resultList = 2
      for (let i = 0; i < this.personlist2.length; i++) {
        if (this.personlist2[i].id === id) {
          if (step === 1) {
            this.result = this.personlist2[i].resultCadreArchives
          }
          if (step === 2) {
            this.result = this.personlist2[i].resultPersonalMatters
          }
          if (step === 3) {
            this.result = this.personlist2[i].resultSolicitingOpinions
          }
          if (step === 4) {
            this.result = this.personlist2[i].resultClueReporting
          }
        }
      }
    },
    saveResultToList () {
      this.resultVisible = false
      let arr = []
      if (this.resultList === 2) {
        arr = this.personlist2
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id === this.resultpersonid) {
            if (this.resultstep === 1) {
              arr[i].resultCadreArchives = this.result
            }
            if (this.resultstep === 2) {
              arr[i].resultPersonalMatters = this.result
            }
            if (this.resultstep === 3) {
              arr[i].resultSolicitingOpinions = this.result
            }
            if (this.resultstep === 4) {
              arr[i].resultClueReporting = this.result
            }
          }
        }
      }
      if (this.resultList === 3) {
        arr = this.personlist3
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].busCandidatePersonId === this.resultpersonid) {
            if (this.resultstep === 1) {
              arr[i].resultCadreArchives = this.result
            }
            if (this.resultstep === 2) {
              arr[i].resultPersonalMatters = this.result
            }
            if (this.resultstep === 3) {
              arr[i].resultSolicitingOpinions = this.result
            }
            if (this.resultstep === 4) {
              arr[i].resultClueReporting = this.result
            }
          }
        }
      }
    },
    showResult3 (id, step) {
      this.resultVisible = true
      this.resultpersonid = id
      this.resultList = 3
      this.resultstep = step
      for (let i = 0; i < this.personlist3.length; i++) {
        if (this.personlist3[i].busCandidatePersonId === id) {
          if (step === 1) {
            this.result = this.personlist3[i].resultCadreArchives
          }
          if (step === 2) {
            this.result = this.personlist3[i].resultPersonalMatters
          }
          if (step === 3) {
            this.result = this.personlist3[i].resultSolicitingOpinions
          }
          if (step === 4) {
            this.result = this.personlist3[i].resultClueReporting
          }
        }
      }
    },
    showNotice (id) {
      this.noticePersonId = id
      this.noticeVisible = true
    },
    handleSelectionChange (val) {
      this.selectPerson = val
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    },
    getApproveList () {
      this.listLoading = true
      this.loadSelectData()
      this.listLoading = true
      let para = {
        step: 2
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/approve/getUserApproveList`, para)
        .then(response => {
          this.listLoading = false
          if (response.data.success) {
            this.personlist3 = response.data.result
            this.getNums()
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
    },
    getNums () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/statnum/necessary/getStatNum2`)
        .then(response => {
          if (response.data.success) {
            this.num1 = response.data.result.num1
            this.num2 = response.data.result.num2
            this.num3 = response.data.result.num3
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  mounted () {
    this.mangeDep = localStorage.getItem('mangeDep')
    if (!this.mangeDep || this.mangeDep === '') {
      this.mangeDep = []
    }
    let departmentCodes = []
    if (this.mangeDep.indexOf('干部一处') > -1) {
      departmentCodes.push(1)
    }
    if (this.mangeDep.indexOf('干部二处') > -1) {
      departmentCodes.push(2)
    }
    if (this.mangeDep.indexOf('干部三处') > -1) {
      departmentCodes.push(3)
    }
    this.departmentCode = departmentCodes[0]

    if (this.departmentCode === 1) {
      this.tabdept = '干部一处事项'
    }
    if (this.departmentCode === 2) {
      this.tabdept = '干部二处事项'
    }
    if (this.departmentCode === 3) {
      this.tabdept = '干部三处事项'
    }
    console.log(this.departmentCode)
    this.getApproveList()
    this.loadSelectData()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
  #selectionlist .wboxnoborder .el-table{
    border: #95B8E7 solid 1px;
  }
  #selectionlist .wboxnoborder .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  #selectionlist .wboxnoborder .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    text-align: center;
  }
  #selectionlist .el-table__row{
    height: 50px;
  }
</style>
<style scoped>
  #selectionlist .cell i {
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: center;
    display: block;
    margin: 0 auto;
  }
  .workflowmsg ul{
    background:#F5F7FA;
    margin:0 20px 20px;
    padding:10px 0;
  }
  .workflowmsg li{
    padding:0;
    list-style: none;
    margin-left:20px;
    line-height: 200%;
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  h3{
    font-size:var(--size16) !important;
    font-weight: bolder;
    padding-left: 20px;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  #selectionlist .wboxnoborder{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    margin:0 10px;
    overflow: hidden;
  }
</style>
